<template>
    <div>
        <el-table v-if="tableData.length > 0" :data="tableData" style="width: 100%">
            <el-table-column type="index" :index="indexMethod" min-width="10%" label="序号" align="center"></el-table-column>
            <el-table-column min-width="25%" label="问题蒸馏词" align="center" prop="Keyword"></el-table-column>
            <el-table-column min-width="50%" label="介绍" align="center" prop="Introduction"></el-table-column>
            <el-table-column min-width="15%" align="center">
                <template #default="scope">
                    <el-button type="primary" plain @click="handleView(scope.row)">查看</el-button>
                    <el-button type="success" plain @click="handleEdit(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-else>
            <el-empty :image-size="200" />
        </div>
        <div class="flex flex-center pt-10px pb-10px">
            <Pagination v-if="tableData.length > 0" v-model:total="page.total" v-model:page="queryParams.curPage" v-model:limit="queryParams.pageSizes" @pagination="handleQuery" />
        </div>
        <el-dialog v-model="state.isDetail" :show-close="false" modal-class="customize-dialog"
        :append-to-body="true" :close-on-click-modal="false" align-center width="500px">
            <template #header="{ titleId, titleClass }">
                <div class="flex justify-between items-center dialog-header">
                    <div class="flex items-center">
                        <h4 :id="titleId" :class="titleClass">查看</h4>
                    </div>
                    <div class="flex items-center">
                        <svg-icon size="16px" icon-class="close-line" @click="state.isDetail = false"></svg-icon>
                    </div>
                </div>
            </template>
            <div>
                <h2 class="text-center font-bold lh-28px">{{ state.word.title }}</h2>
                <div class="text-18px lh-32px mt-10px article-detail" v-html="state.word.content">

                </div>
            </div>
            <div class="flex flex-center mt-16px">
                <el-button @click="state.isDetail = false">取消</el-button>
                <el-button @click="state.isDetail = false" type="primary">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog v-model="state.isEdit" :show-close="false" modal-class="customize-dialog"
        :append-to-body="true" :close-on-click-modal="false" align-center width="800px">
            <template #header="{ titleId, titleClass }">
                <div class="flex justify-between items-center dialog-header">
                    <div class="flex items-center">
                        <h4 :id="titleId" :class="titleClass">修改</h4>
                    </div>
                    <div class="flex items-center">
                        <svg-icon size="16px" icon-class="close-line" @click="state.isEdit = false"></svg-icon>
                    </div>
                </div>
            </template>
            <div class="pr-20px">
                <el-form label-width="100px">
                    <el-form-item label="问题蒸馏词">
                        <el-input disabled v-model="state.word.title"></el-input>
                    </el-form-item>
                    <el-form-item label="介绍">
                        <el-input type="textarea" :rows="10" v-model="state.word.content"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="flex flex-center mt-16px">
                <el-button @click="state.isEdit = false">取消</el-button>
                <el-button @click="handleEditWord()" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { createArticleApi,addDistillationIntroApi } from '@/api/geoBasic'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { SuccessFilled } from '@element-plus/icons-vue'

const props = defineProps({
    tableData: {
        type: Array<any>,
        default: () => []
    },
    page:{
        type: Object,
        default: () => {}
    },
    noDataStr: {
        type: String,
        default: '暂无数据'
    },
})

const state = reactive({
    isDetail:false,
    isEdit:false,
    word:{
        id:0,
        title:'',
        content:''
    }
})

const emit = defineEmits(['update:data'])

const queryParams = reactive({
    curPage: props.page.curPage,
    pageSizes: props.page.pageSizes,
    type:props.page.type,
    limit:props.page.limit,
})

function handleQuery(val: any) {
    queryParams.limit = val.limit
    emit('update:data', queryParams)
}

async function handleGenerate(id: number) {
    const res: ResType = await createArticleApi({ id })
    if (res.code === 200) {
        confirmMessageBox(SuccessFilled, res.message)
    } else {
        ElMessage.error(res.message)
    }
}

function indexMethod(index: number) {
    return (queryParams.curPage - 1) * queryParams.limit + index + 1
}

function handleView(word:any) {
    state.isDetail = true
    state.word.id = word.ID
    state.word.title = word.Keyword
    state.word.content = word.Introduction
}
function handleEdit(word:any) {
    state.isEdit = true
    state.word.id = word.ID
    state.word.title = word.Keyword
    state.word.content = word.Introduction
}

async function handleEditWord(){
    const res: ResType = await addDistillationIntroApi({
        ID:state.word.id,
        Introduction:state.word.content
    })
    if (res.code === 200) {
        confirmMessageBox(SuccessFilled, res.message)
        state.isEdit = false
        emit('update:data', queryParams)
    } else {
        ElMessage.error(res.message)
    }
}
</script>

<style scoped>

</style>